<template>
    <div class="shop-detail-container">
        <el-page-header style="height: 40px;" @back="router.go(-1)" :content="shop.name" />
        <el-row :gutter="20">
            <el-col :span="16">
                <el-image
                        :src="shop.image"
                        fit="cover"
                        class="main-image"
                >
                    <template #error>
                        <div class="image-error">
                            <el-icon><Picture /></el-icon>
                        </div>
                    </template>
                </el-image>

                <el-tabs v-model="activeTab" class="detail-tabs">
                    <el-tab-pane label="商家介绍" name="intro">
                        <div class="shop-intro">
                            <h3>商家简介</h3>
                            <p>{{ shop.description }}</p>

                            <h3>特色服务</h3>
                            <el-tag
                                    v-for="tag in shop.tags"
                                    :key="tag"
                                    type="info"
                                    style="margin-right: 10px; margin-bottom: 10px"
                            >
                                {{ tag }}
                            </el-tag>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="剧本列表" name="scripts">
                        <div class="shop-scripts">
                            <h3>可玩剧本</h3>
                            <script-card
                                    v-for="script in shop.scripts"
                                    :key="script.id"
                                    :script="script"
                                    style="margin-bottom: 15px"
                                    @click.native="goToScriptDetail(script.id)"
                            />
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="评价" name="reviews">
                        <div class="shop-reviews">
                            <h3>用户评价</h3>
                            <el-rate
                                    v-model="shop.rating"
                                    disabled
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value}分"
                            />

                            <div class="review-list">
                                <div v-for="review in shop.reviews" :key="review.id" class="review-item">
                                    <div class="review-header">
                                        <span class="review-user">{{ review.user }}</span>
                                        <el-rate
                                                v-model="review.rating"
                                                disabled
                                                size="small"
                                        />
                                    </div>
                                    <div class="review-content">{{ review.content }}</div>
                                    <div class="review-date">{{ review.date }}</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>

            <el-col :span="8">
                <el-card class="info-card">
                    <h3>基本信息</h3>

                    <div class="info-item">
                        <el-icon><Location /></el-icon>
                        <span>地址: {{ shop.address }}</span>
                    </div>

                    <div class="info-item">
                        <el-icon><Phone /></el-icon>
                        <span>电话: {{ shop.phone }}</span>
                    </div>

                    <div class="info-item">
                        <el-icon><Clock /></el-icon>
                        <span>营业时间: {{ shop.businessHours }}</span>
                    </div>

                    <div class="info-item">
                        <el-icon><PriceTag /></el-icon>
                        <span>人均消费: ¥{{ shop.avgPrice }}</span>
                    </div>

                    <div class="action-buttons">
                        <el-button type="primary" size="large" @click="handleReserve">
                            立即预约
                        </el-button>
                        <el-button type="info" size="large" @click="handleContact">
                            联系商家
                        </el-button>
                    </div>

                    <div class="map-container">
                        <!-- 这里可以嵌入地图组件 -->
                        <div class="map-placeholder">
                            <el-icon><MapLocation /></el-icon>
                            <span>地图位置</span>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Picture, Location, Phone, Clock, PriceTag, MapLocation } from '@element-plus/icons-vue'
import ScriptCard from '../../script/scriptcard'
import { mockShops } from '@/components/api/mockData.js'

const route = useRoute()
const router = useRouter()
const shopId = route.params.id

const shop = ref({})
const activeTab = ref('intro')

// 获取商家详情数据
onMounted(async () => {
    shop.value = await mockShops(shopId)
})

const goToScriptDetail = (id) => {
    router.push({ name: 'script-detail', params: { id } })
}

const handleReserve = () => {
    // 预约逻辑
    console.log('预约商家:', shop.value.name)
}

const handleContact = () => {
    // 联系商家逻辑
    console.log('联系商家:', shop.value.phone)
}
</script>

<style scoped>
.shop-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.main-image {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.image-error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #999;
}

.detail-tabs {
    margin-top: 20px;
}

.shop-intro h3,
.shop-scripts h3,
.shop-reviews h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

.info-card {
    position: sticky;
    top: 20px;
}

.info-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.info-item .el-icon {
    margin-right: 10px;
    color: #666;
}

.action-buttons {
    margin: 20px 0;
    display: flex;
    gap: 10px;
}

.map-container {
    height: 200px;
    background-color: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

.map-placeholder {
    text-align: center;
}

.map-placeholder .el-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
}

.review-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.review-user {
    font-weight: bold;
}

.review-content {
    color: #666;
    margin-bottom: 5px;
}

.review-date {
    font-size: 12px;
    color: #999;
}
</style>